রিঅ্যাক্ট use হুক: অ্যাসিঙ্ক রিসোর্স ব্যবহারে দক্ষতা অর্জন

রিঅ্যাক্ট হুকস ফাংশনাল কম্পোনেন্টে স্টেট এবং সাইড এফেক্ট পরিচালনার পদ্ধতিতে বৈপ্লবিক পরিবর্তন এনেছে। এর মধ্যে সবচেয়ে শক্তিশালী সংমিশ্রণ হলো useEffect এবং useState ব্যবহার করে অ্যাসিঙ্ক্রোনাস রিসোর্স ব্যবহার করা, যেমন একটি API থেকে ডেটা আনা। এই নিবন্ধে, হুক ব্যবহার করে অ্যাসিঙ্ক্রোনাস অপারেশনের জটিলতা, সেরা অনুশীলন, ত্রুটি পরিচালনা এবং শক্তিশালী ও বিশ্বব্যাপী ব্যবহারযোগ্য রিঅ্যাক্ট অ্যাপ্লিকেশন তৈরির জন্য পারফরম্যান্স অপ্টিমাইজেশন নিয়ে আলোচনা করা হয়েছে।

মৌলিক বিষয়গুলো বোঝা: useEffect এবং useState

আরও জটিল পরিস্থিতিতে যাওয়ার আগে, আসুন এর সাথে জড়িত মৌলিক হুকগুলো আবার দেখে নেওয়া যাক:

• useEffect: এই হুকটি আপনাকে ফাংশনাল কম্পোনেন্টে সাইড এফেক্ট সঞ্চালন করতে দেয়। সাইড এফেক্টের মধ্যে ডেটা ফেচিং, সাবস্ক্রিপশন, বা সরাসরি DOM ম্যানিপুলেশন অন্তর্ভুক্ত থাকতে পারে।
• useState: এই হুকটি আপনাকে ফাংশনাল কম্পোনেন্টে স্টেট যোগ করতে দেয়। সময়ের সাথে পরিবর্তিত ডেটা, যেমন লোডিং স্টেট বা API থেকে আনা ডেটা পরিচালনা করার জন্য স্টেট অপরিহার্য।

ডেটা ফেচ করার সাধারণ প্যাটার্ন হলো useEffect ব্যবহার করে অ্যাসিঙ্ক্রোনাস অনুরোধ শুরু করা এবং useState ব্যবহার করে ডেটা, লোডিং স্টেট এবং সম্ভাব্য যেকোনো ত্রুটি সংরক্ষণ করা।

একটি সাধারণ ডেটা ফেচিং উদাহরণ

চলুন একটি কাল্পনিক API থেকে ব্যবহারকারীর ডেটা আনার একটি সাধারণ উদাহরণ দিয়ে শুরু করা যাক:

উদাহরণ: ব্যবহারকারীর ডেটা ফেচ করা

```javascript import React, { useState, useEffect } from 'react'; function UserProfile({ userId }) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { setLoading(true); setError(null); try { const response = await fetch(`https://api.example.com/users/${userId}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); setUser(data); } catch (error) { setError(error); } finally { setLoading(false); } }; fetchData(); }, [userId]); if (loading) { return

Loading user data...

; } if (error) { return

Error: {error.message}

; } if (!user) { return

No user data available.

; } return ( ); } export default UserProfile; ```

এই উদাহরণে, যখনই userId prop পরিবর্তন হয়, useEffect ব্যবহারকারীর ডেটা ফেচ করে। এটি fetch API-এর অ্যাসিঙ্ক্রোনাস প্রকৃতি পরিচালনা করতে একটি async ফাংশন ব্যবহার করে। কম্পোনেন্টটি ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য লোডিং এবং ত্রুটির স্টেটগুলোও পরিচালনা করে।

লোডিং এবং এরর স্টেট পরিচালনা করা

লোডিংয়ের সময় ভিজ্যুয়াল ফিডব্যাক প্রদান করা এবং ত্রুটিগুলো সুন্দরভাবে পরিচালনা করা একটি ভালো ব্যবহারকারী অভিজ্ঞতার জন্য অত্যন্ত গুরুত্বপূর্ণ। আগের উদাহরণটি ইতিমধ্যেই প্রাথমিক লোডিং এবং ত্রুটি পরিচালনার বিষয়টি প্রদর্শন করেছে। আসুন এই ধারণাগুলো আরও বিস্তারিতভাবে আলোচনা করি।

লোডিং স্টেট

একটি লোডিং স্টেট স্পষ্টভাবে নির্দেশ করা উচিত যে ডেটা আনা হচ্ছে। এটি একটি সাধারণ লোডিং বার্তা বা আরও উন্নত লোডিং স্পিনার ব্যবহার করে করা যেতে পারে।

উদাহরণ: একটি লোডিং স্পিনার ব্যবহার করা

একটি সাধারণ টেক্সট বার্তার পরিবর্তে, আপনি একটি লোডিং স্পিনার কম্পোনেন্ট ব্যবহার করতে পারেন:

```javascript // LoadingSpinner.js import React from 'react'; function LoadingSpinner() { return

; // আপনার আসল স্পিনার কম্পোনেন্ট দিয়ে প্রতিস্থাপন করুন } export default LoadingSpinner; ```

```javascript // UserProfile.js (modified) import React, { useState, useEffect } from 'react'; import LoadingSpinner from './LoadingSpinner'; function UserProfile({ userId }) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { ... }, [userId]); // আগের মতোই useEffect if (loading) { return ; // লোডিং স্পিনার কম্পোনেন্ট ব্যবহার করুন } if (error) { return

Error: {error.message}

; } if (!user) { return

No user data available.

; } return ( ... ); // আগের মতোই return } export default UserProfile; ```

ত্রুটি পরিচালনা

ত্রুটি পরিচালনার ক্ষেত্রে ব্যবহারকারীকে তথ্যপূর্ণ বার্তা দেওয়া উচিত এবং সম্ভাব্য ক্ষেত্রে ত্রুটি থেকে পুনরুদ্ধারের উপায় সরবরাহ করা উচিত। এর মধ্যে অনুরোধটি পুনরায় চেষ্টা করা বা সহায়তার জন্য যোগাযোগের তথ্য প্রদান করা অন্তর্ভুক্ত থাকতে পারে।

উদাহরণ: একটি ব্যবহারকারী-বান্ধব ত্রুটি বার্তা প্রদর্শন করা

```javascript // UserProfile.js (modified) import React, { useState, useEffect } from 'react'; function UserProfile({ userId }) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { ... }, [userId]); // আগের মতোই useEffect if (loading) { return

Loading user data...

; } if (error) { return ( ); } if (!user) { return

No user data available.

; } return ( ... ); // আগের মতোই return } export default UserProfile; ```

পুনরায় ব্যবহারযোগ্যতার জন্য কাস্টম হুক তৈরি করা

যখন আপনি একাধিক কম্পোনেন্টে একই ডেটা ফেচিং লজিক পুনরাবৃত্তি করতে দেখেন, তখন একটি কাস্টম হুক তৈরি করার সময় হয়েছে। কাস্টম হুক কোডের পুনরায় ব্যবহারযোগ্যতা এবং রক্ষণাবেক্ষণযোগ্যতা বাড়ায়।

উদাহরণ: useFetch হুক

আসুন একটি useFetch হুক তৈরি করি যা ডেটা ফেচিং লজিককে আবদ্ধ করে:

```javascript // useFetch.js import { useState, useEffect } from 'react'; function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { setLoading(true); setError(null); try { const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const jsonData = await response.json(); setData(jsonData); } catch (error) { setError(error); } finally { setLoading(false); } }; fetchData(); }, [url]); return { data, loading, error }; } export default useFetch; ```

এখন আপনি আপনার কম্পোনেন্টগুলোতে useFetch হুক ব্যবহার করতে পারেন:

```javascript // UserProfile.js (modified) import React from 'react'; import useFetch from './useFetch'; function UserProfile({ userId }) { const { data: user, loading, error } = useFetch(`https://api.example.com/users/${userId}`); if (loading) { return

Loading user data...

; } if (error) { return

Error: {error.message}

; } if (!user) { return

No user data available.

; } return ( ); } export default UserProfile; ```

useFetch হুক কম্পোনেন্টের লজিককে উল্লেখযোগ্যভাবে সহজ করে এবং আপনার অ্যাপ্লিকেশনের অন্যান্য অংশে ডেটা ফেচিং কার্যকারিতা পুনরায় ব্যবহার করা সহজ করে তোলে। এটি বিশেষ করে জটিল অ্যাপ্লিকেশনগুলোর জন্য উপকারী যেখানে অসংখ্য ডেটা নির্ভরতা রয়েছে।

পারফরম্যান্স অপ্টিমাইজ করা

অ্যাসিঙ্ক্রোনাস রিসোর্স ব্যবহার অ্যাপ্লিকেশন পারফরম্যান্সকে প্রভাবিত করতে পারে। হুক ব্যবহার করার সময় পারফরম্যান্স অপ্টিমাইজ করার জন্য এখানে কয়েকটি কৌশল রয়েছে:

১. ডিবাউন্সিং এবং থ্রটলিং

যখন ঘন ঘন পরিবর্তনশীল মান, যেমন সার্চ ইনপুট, নিয়ে কাজ করা হয়, তখন ডিবাউন্সিং এবং থ্রটলিং অতিরিক্ত API কল প্রতিরোধ করতে পারে। ডিবাউন্সিং নিশ্চিত করে যে একটি ফাংশন কেবল একটি নির্দিষ্ট বিলম্বের পরে কল করা হয়, যেখানে থ্রটলিং একটি ফাংশন কল করার হারকে সীমিত করে।

উদাহরণ: একটি সার্চ ইনপুট ডিবাউন্স করা```javascript import React, { useState, useEffect } from 'react'; import useFetch from './useFetch'; function SearchComponent() { const [searchTerm, setSearchTerm] = useState(''); const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(''); useEffect(() => { const timerId = setTimeout(() => { setDebouncedSearchTerm(searchTerm); }, 500); // 500ms বিলম্ব return () => { clearTimeout(timerId); }; }, [searchTerm]); const { data: results, loading, error } = useFetch(`https://api.example.com/search?q=${debouncedSearchTerm}`); const handleInputChange = (event) => { setSearchTerm(event.target.value); }; return (

); } export default SearchComponent; ```

এই উদাহরণে, debouncedSearchTerm কেবল তখনই আপডেট করা হয় যখন ব্যবহারকারী 500ms ধরে টাইপ করা বন্ধ করে, যা প্রতিটি কীস্ট্রোকের সাথে অপ্রয়োজনীয় API কল প্রতিরোধ করে। এটি পারফরম্যান্স উন্নত করে এবং সার্ভারের লোড কমায়।

২. ক্যাশিং

ফেচ করা ডেটা ক্যাশিং করলে API কলের সংখ্যা উল্লেখযোগ্যভাবে হ্রাস পেতে পারে। আপনি বিভিন্ন স্তরে ক্যাশিং প্রয়োগ করতে পারেন:

• ব্রাউজার ক্যাশ: উপযুক্ত HTTP ক্যাশিং হেডার ব্যবহার করার জন্য আপনার API কনফিগার করুন।
• ইন-মেমরি ক্যাশ: আপনার অ্যাপ্লিকেশনের মধ্যে ফেচ করা ডেটা সংরক্ষণ করতে একটি সাধারণ অবজেক্ট ব্যবহার করুন।
• পার্সিস্টেন্ট স্টোরেজ: দীর্ঘমেয়াদী ক্যাশিংয়ের জন্য localStorage বা sessionStorage ব্যবহার করুন।

উদাহরণ: useFetch-এ একটি সাধারণ ইন-মেমরি ক্যাশ প্রয়োগ করা

```javascript // useFetch.js (modified) import { useState, useEffect } from 'react'; const cache = {}; function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { setLoading(true); setError(null); if (cache[url]) { setData(cache[url]); setLoading(false); return; } try { const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const jsonData = await response.json(); cache[url] = jsonData; setData(jsonData); } catch (error) { setError(error); } finally { setLoading(false); } }; fetchData(); }, [url]); return { data, loading, error }; } export default useFetch; ```

এই উদাহরণটি একটি সাধারণ ইন-মেমরি ক্যাশ যোগ করে। যদি একটি নির্দিষ্ট URL-এর ডেটা ইতিমধ্যে ক্যাশে থাকে, তবে এটি একটি নতুন API কল করার পরিবর্তে সরাসরি ক্যাশ থেকে পুনরুদ্ধার করা হয়। এটি ঘন ঘন অ্যাক্সেস করা ডেটার জন্য পারফরম্যান্স নাটকীয়ভাবে উন্নত করতে পারে।

৩. মেমোাইজেশন

রিঅ্যাক্টের useMemo হুক ফেচ করা ডেটার উপর নির্ভরশীল ব্যয়বহুল গণনাগুলোকে মেমোাইজ করতে ব্যবহার করা যেতে পারে। এটি ডেটা পরিবর্তন না হলে অপ্রয়োজনীয় রি-রেন্ডার প্রতিরোধ করে।

উদাহরণ: একটি ডিরাইভড ভ্যালু মেমোাইজ করা

```javascript import React, { useMemo } from 'react'; import useFetch from './useFetch'; function UserProfile({ userId }) { const { data: user, loading, error } = useFetch(`https://api.example.com/users/${userId}`); const formattedName = useMemo(() => { if (!user) return ''; return `${user.firstName} ${user.lastName}`; }, [user]); if (loading) { return

Loading user data...

; } if (error) { return

Error: {error.message}

; } if (!user) { return

No user data available.

; } return ( ); } export default UserProfile; ```

এই উদাহরণে, formattedName কেবল তখনই পুনরায় গণনা করা হয় যখন user অবজেক্ট পরিবর্তন হয়। যদি user অবজেক্ট একই থাকে, তবে মেমোাইজড মানটি ফেরত দেওয়া হয়, যা অপ্রয়োজনীয় গণনা এবং রি-রেন্ডার প্রতিরোধ করে।

৪. কোড স্প্লিটিং

কোড স্প্লিটিং আপনাকে আপনার অ্যাপ্লিকেশনকে ছোট ছোট খণ্ডে বিভক্ত করতে দেয়, যা চাহিদা অনুযায়ী লোড করা যেতে পারে। এটি আপনার অ্যাপ্লিকেশনের প্রাথমিক লোড সময় উন্নত করতে পারে, বিশেষ করে অনেক নির্ভরতা সহ বড় অ্যাপ্লিকেশনগুলোর জন্য।

উদাহরণ: একটি কম্পোনেন্ট লেজি লোড করা

```javascript import React, { lazy, Suspense } from 'react'; const UserProfile = lazy(() => import('./UserProfile')); function App() { return ( Loading user profile...

}> ); } export default App; ```

এই উদাহরণে, UserProfile কম্পোনেন্টটি কেবল তখনই লোড করা হয় যখন এটি প্রয়োজন হয়। Suspense কম্পোনেন্টটি কম্পোনেন্ট লোড হওয়ার সময় একটি ফলব্যাক UI সরবরাহ করে।

রেস কন্ডিশন পরিচালনা করা

রেস কন্ডিশন ঘটতে পারে যখন একই useEffect হুকে একাধিক অ্যাসিঙ্ক্রোনাস অপারেশন শুরু করা হয়। যদি সমস্ত অপারেশন সম্পূর্ণ হওয়ার আগে কম্পোনেন্ট আনমাউন্ট হয়ে যায়, তাহলে আপনি ত্রুটি বা অপ্রত্যাশিত আচরণের সম্মুখীন হতে পারেন। কম্পোনেন্ট আনমাউন্ট হওয়ার সময় এই অপারেশনগুলো পরিষ্কার করা অত্যন্ত গুরুত্বপূর্ণ।

উদাহরণ: একটি ক্লিনআপ ফাংশন দিয়ে রেস কন্ডিশন প্রতিরোধ করা

```javascript import React, { useState, useEffect } from 'react'; function UserProfile({ userId }) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { let isMounted = true; // কম্পোনেন্ট মাউন্ট স্ট্যাটাস ট্র্যাক করতে একটি ফ্ল্যাগ যোগ করুন const fetchData = async () => { setLoading(true); setError(null); try { const response = await fetch(`https://api.example.com/users/${userId}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); if (isMounted) { // কেবল কম্পোনেন্টটি মাউন্ট করা থাকলে স্টেট আপডেট করুন setUser(data); } } catch (error) { if (isMounted) { // কেবল কম্পোনেন্টটি মাউন্ট করা থাকলে স্টেট আপডেট করুন setError(error); } } finally { if (isMounted) { // কেবল কম্পোনেন্টটি মাউন্ট করা থাকলে স্টেট আপডেট করুন setLoading(false); } } }; fetchData(); return () => { isMounted = false; // কম্পোনেন্ট আনমাউন্ট হলে ফ্ল্যাগটি false সেট করুন }; }, [userId]); if (loading) { return

Loading user data...

; } if (error) { return

Error: {error.message}

; } if (!user) { return

No user data available.

; } return (

{user.name}

Email: {user.email}

Location: {user.location}

); } export default UserProfile; ```

এই উদাহরণে, একটি ফ্ল্যাগ isMounted ব্যবহার করা হয় কম্পোনেন্টটি এখনও মাউন্ট করা আছে কিনা তা ট্র্যাক করতে। স্টেট কেবল তখনই আপডেট করা হয় যদি কম্পোনেন্টটি এখনও মাউন্ট করা থাকে। ক্লিনআপ ফাংশনটি কম্পোনেন্ট আনমাউন্ট হওয়ার সময় ফ্ল্যাগটিকে false সেট করে, যা রেস কন্ডিশন এবং মেমরি লিক প্রতিরোধ করে। একটি বিকল্প পদ্ধতি হলো `AbortController` API ব্যবহার করে ফেচ অনুরোধটি বাতিল করা, যা বিশেষ করে বড় ডাউনলোড বা দীর্ঘ সময় ধরে চলা অপারেশনের জন্য গুরুত্বপূর্ণ।

অ্যাসিঙ্ক রিসোর্স ব্যবহারের জন্য বৈশ্বিক বিবেচনা

একটি বিশ্বব্যাপী দর্শকদের জন্য রিঅ্যাক্ট অ্যাপ্লিকেশন তৈরি করার সময়, এই বিষয়গুলো বিবেচনা করুন:

• নেটওয়ার্ক লেটেন্সি: বিশ্বের বিভিন্ন অংশের ব্যবহারকারীরা বিভিন্ন নেটওয়ার্ক লেটেন্সি অনুভব করতে পারে। গতির জন্য আপনার API এন্ডপয়েন্টগুলো অপ্টিমাইজ করুন এবং লেটেন্সির প্রভাব কমাতে ক্যাশিং এবং কোড স্প্লিটিংয়ের মতো কৌশল ব্যবহার করুন। আপনার ব্যবহারকারীদের কাছাকাছি সার্ভার থেকে স্ট্যাটিক অ্যাসেট পরিবেশন করতে একটি CDN (কন্টেন্ট ডেলিভারি নেটওয়ার্ক) ব্যবহার করার কথা বিবেচনা করুন। উদাহরণস্বরূপ, যদি আপনার API মার্কিন যুক্তরাষ্ট্রে হোস্ট করা হয়, তবে এশিয়ার ব্যবহারকারীরা উল্লেখযোগ্য বিলম্ব অনুভব করতে পারেন। একটি CDN আপনার API প্রতিক্রিয়া বিভিন্ন স্থানে ক্যাশ করতে পারে, ডেটা ভ্রমণের দূরত্ব কমিয়ে।
• ডেটা স্থানীয়করণ: ব্যবহারকারীর অবস্থানের উপর ভিত্তি করে তারিখ, মুদ্রা এবং সংখ্যার মতো ডেটা স্থানীয়করণের প্রয়োজন বিবেচনা করুন। ডেটা ফরম্যাটিং পরিচালনা করতে react-intl এর মতো আন্তর্জাতিকীকরণ (i18n) লাইব্রেরি ব্যবহার করুন।
• অ্যাক্সেসিবিলিটি: নিশ্চিত করুন যে আপনার অ্যাপ্লিকেশনটি প্রতিবন্ধী ব্যবহারকারীদের জন্য অ্যাক্সেসযোগ্য। ARIA অ্যাট্রিবিউট ব্যবহার করুন এবং অ্যাক্সেসিবিলিটির সেরা অনুশীলনগুলো অনুসরণ করুন। উদাহরণস্বরূপ, ছবির জন্য বিকল্প টেক্সট সরবরাহ করুন এবং নিশ্চিত করুন যে আপনার অ্যাপ্লিকেশনটি একটি কীবোর্ড ব্যবহার করে নেভিগেট করা যায়।
• টাইম জোন: তারিখ এবং সময় প্রদর্শন করার সময় টাইম জোনের প্রতি মনোযোগী হন। টাইম জোন রূপান্তর পরিচালনা করতে moment-timezone এর মতো লাইব্রেরি ব্যবহার করুন। উদাহরণস্বরূপ, যদি আপনার অ্যাপ্লিকেশনটি ইভেন্টের সময় প্রদর্শন করে, তবে নিশ্চিত করুন যে সেগুলোকে ব্যবহারকারীর স্থানীয় টাইম জোনে রূপান্তর করা হয়েছে।
• সাংস্কৃতিক সংবেদনশীলতা: ডেটা প্রদর্শন এবং আপনার ইউজার ইন্টারফেস ডিজাইন করার সময় সাংস্কৃতিক পার্থক্য সম্পর্কে সচেতন থাকুন। এমন ছবি বা প্রতীক ব্যবহার করা এড়িয়ে চলুন যা নির্দিষ্ট সংস্কৃতিতে আপত্তিকর হতে পারে। আপনার অ্যাপ্লিকেশনটি সাংস্কৃতিকভাবে উপযুক্ত কিনা তা নিশ্চিত করতে স্থানীয় বিশেষজ্ঞদের সাথে পরামর্শ করুন।

উপসংহার

হুক ব্যবহার করে রিঅ্যাক্টে অ্যাসিঙ্ক্রোনাস রিসোর্স ব্যবহারে দক্ষতা অর্জন করা শক্তিশালী এবং পারফরম্যান্ট অ্যাপ্লিকেশন তৈরির জন্য অপরিহার্য। useEffect এবং useState এর মৌলিক বিষয়গুলো বোঝার মাধ্যমে, পুনরায় ব্যবহারযোগ্যতার জন্য কাস্টম হুক তৈরি করে, ডিবাউন্সিং, ক্যাশিং এবং মেমোাইজেশনের মতো কৌশল দিয়ে পারফরম্যান্স অপ্টিমাইজ করে এবং রেস কন্ডিশন পরিচালনা করে, আপনি এমন অ্যাপ্লিকেশন তৈরি করতে পারেন যা বিশ্বজুড়ে ব্যবহারকারীদের জন্য একটি দুর্দান্ত ব্যবহারকারী অভিজ্ঞতা প্রদান করে। বিশ্বব্যাপী দর্শকদের জন্য অ্যাপ্লিকেশন তৈরি করার সময় সর্বদা নেটওয়ার্ক লেটেন্সি, ডেটা স্থানীয়করণ এবং সাংস্কৃতিক সংবেদনশীলতার মতো বিশ্বব্যাপী বিষয়গুলো বিবেচনা করতে ভুলবেন না।

আরও রিসোর্স

• রিঅ্যাক্ট useEffect ডকুমেন্টেশন
• রিঅ্যাক্ট useState ডকুমেন্টেশন
• useHooks.com - পুনরায় ব্যবহারযোগ্য রিঅ্যাক্ট হুকসের একটি সংগ্রহ
• ফেচ API ডকুমেন্টেশন